<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>YTUI-BUTTON</title>
    <link rel="stylesheet" href="../css/ytui.css" />
    <script src="../js/html-size-calculation.js"></script>

</head>


<body class="bgfb header-fixed">
    <header class="header-bar bg-main">
        <a href="../index.html" class="header-left">
            <i class="icon icon-pre"></i>
            <span class="fz28">返回</span>
        </a>
        <h2 class="header-title">列表</h2>
    </header>
    <section class="mt20">
        <div class="pb20 pl30">
            <h2 class="h4">图文列表</h2>
        </div>
        <ul class="list">
            <li>
                <a href="#" class="yt yt-ac">
                    <div class="list-img mr20" style="background-image:url(../images/1.png)"></div>
                    <div class="yt-f1">
                        <div class="list-title">标题</div>
                        <span class="fz26">时间：2015-10-10</span>
                        <p class="fz26 lh14 yt-te2">我们擅于发掘富有价值的洞察并具有最广泛的能力，深谙业务与技术，能迅速、明确的交付业务成果，帮您解决最为复杂的业务难题。</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="yt yt-ac">
                    <div class="list-img mr20" style="background-image:url(../images/1.png)"></div>
                    <div class="yt-f1">
                        <div class="list-title">我们是创业者的技术合伙人 我们提供创业一条龙服务</div>
                        <span class="fz26">时间：2015-10-10</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="yt yt-ac">
                    <div class="yt-f1">
                        <div class="list-title">标题</div>
                        <span class="fz26">时间：2015-10-10</span>
                        <p class="fz26 lh14 yt-te2">我们擅于发掘富有价值的洞察并具有最广泛的能力，深谙业务与技术，能迅速、明确的交付业务成果，帮您解决最为复杂的业务难题。</p>
                    </div>
                    <div class="list-img ml20" style="background-image:url(../images/1.png)"></div>
                </a>
            </li>
            <li>
                <a href="#" class="yt yt-ac">
                    <div class="list-img mr20" style="background-image:url(../images/1.png)"></div>
                    <div class="yt-f1">
                        <div class="list-title">标题</div>
                        <span class="fz26">时间：2015-10-10</span>
                        <p class="fz26 yt-te">我们擅于发掘富有价值的洞察并具有最广泛的能力，深谙业务与技术，能迅速、明确的交付业务成果，帮您解决最为复杂的业务难题。</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="yt yt-ac">
                    <div class="list-img mr20" style="background-image:url(../images/1.png)"></div>
                    <div class="yt-f1">
                        <div class="list-title">标题</div>
                        <span class="fz26">时间：2015-10-10</span>
                        <p class="fz26 yt-te">我们擅于发掘富有价值的洞察并具有最广泛的能力，深谙业务与技术，能迅速、明确的交付业务成果，帮您解决最为复杂的业务难题。</p>
                    </div>
                    <i class="icon icon-next"></i>
                </a>
            </li>
        </ul>
        <div class="pb20 pt30 pl30">
            <h2 class="h4">普通</h2>
        </div>
        <ul class="list">
            <li class="yt yt-ac">
                <i class="icon icon-users mr10"></i>
                <h3 class="yt-f1 list-title">列表标题</h3>
                <i class="icon icon-next"></i>
            </li>
            <li class="yt yt-ac">
                <i class="icon icon-star mr10"></i>
                <h3 class="yt-f1 list-title">列表标题</h3>
                <span class="badge bg-red badge-round">10</span>
                <i class="icon icon-next"></i>
            </li>
        </ul>

        <div class="pt30 pb20 pl30">
            <h2 class="h4">带链接的</h2>
        </div>
        <ul class="list">
            <li class="yt-ac">
                <a href="#" class="yt yt-ac">
                    <i class="icon icon-menu mr10"></i>
                    <h3 class="yt-f1 list-title">列表标题</h3>
                    <span class="fz28">陈邓</span>
                    <i class="icon icon-next"></i>
                </a>
            </li>
        </ul>
        <div class="pt30 pb20 pl30">
            <h2 class="h4">不带图标</h2>
        </div>
        <ul class="list">
            <li>
                <a href="#" class="yt yt-ac">
                    <h3 class="yt-f1 list-title">列表标题</h3>
                    <i class="icon icon-next"></i>
                </a>
            </li>
        </ul>
        <div class="pt30 pb20 pl30">
            <h2 class="h4">带表单控件</h2>
        </div>
        <ul class="list">
            <li class="pt0 pb0">
                <label class="yt yt-ac">
                    <h3 class="list-title">输入框</h3>
                    <div class="yt-f1">
                        <input type="text" class="input-text bn tx-r fz28 pr0" placeholder="请输入内容">
                    </div>
                </label>
            </li>
            <li class="pt0 pb0">
                <label class="yt yt-ac">
                    <h3 class="list-title">Select</h3>
                    <div class="yt-f1">
                        <select class="select select-next" dir="rtl">
                            <option>成都猿团科技有限公司</option>
                            <option>成都猿团科技有限公司</option>
                        </select>
                    </div>
                </label>
            </li>
            <li>
                <label class="yt yt-ac">
                    <h3 class="yt-f1 list-title">开关</h3>
                    <i class="switch"><input type="checkbox" /><span></span></i>
                </label>
            </li>
            <li>
                <label class="yt yt-ac">
                    <h3 class="yt-f1 list-title">联动开关</h3>
                    <i class="switch"><input type="radio" name="list-radio" checked/><span></span></i>
                </label>
            </li>
            <li>
                <label class="yt yt-ac">
                    <h3 class="yt-f1 list-title">联动开关</h3>
                    <i class="switch"><input type="radio" name="list-radio" /><span></span></i>
                </label>
            </li>
            <li>
                <label class="yt yt-ac">
                    <i class="input-radio mr20"><input type="radio" /><span></span></i>
                    <h3 class="yt-f1 list-title">单选</h3>
                </label>
            </li>
            <li>
                <label class="yt yt-ac">
                    <i class="input-checkbox mr20"><input type="checkbox" /><span></span></i>
                    <h3 class="yt-f1 list-title">复选</h3>

                </label>
            </li>
        </ul>
    </section>
</body>

</html>